<ion-header>
    <div class="header">
        <div class="arrow">
            <ion-icon name="arrow-back"></ion-icon>
        </div>
        <div class="login">
            <button color="#5f94f1" (click)="gotoLogin()" ion-button round>登录/注册</button>
        </div>
        <div class="desc">
            您已获得升级资格，现在登录即可体验
        </div>
    </div>
</ion-header>

<ion-content>

    <div class="content">
        <!--<div class="row menu">
            <div class="col">
                <div class="icon-text">
                    <ion-icon color="secondary" name="chatboxes"></ion-icon>
                    <div>消息</div>
                </div>
            </div>
            <div class="col">
                <div class="icon-text">
                    <ion-icon color="danger" name="stats"></ion-icon>
                    <div>排行</div>
                </div>
            </div>
            <div class="col">
                <div class="icon-text">
                    <ion-icon color="primary" name="ribbon"></ion-icon>
                    <div>特权</div>
                </div>
            </div>
        </div>-->

        <div class="card">
            <div class="card-header">
                <ion-icon color="primary" name="apps"></ion-icon>常用功能
            </div>
            <div class="card-content">
                <div class="row menu border">
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="pin"></ion-icon>
                            <div>离线地图</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="secondary" name="mic"></ion-icon>
                            <div>导航语言包</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="energized" name="star"  ></ion-icon>
                            <div>收藏</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="ribbon"></ion-icon>
                            <div>特权</div>
                        </div>
                    </div>
                </div>
                <div class="row menu border">
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="secondary" name="chatboxes"></ion-icon>
                            <div>消息</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="danger" name="stats"></ion-icon>
                            <div>排行</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="ribbon"></ion-icon>
                            <div>特权</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="ribbon"></ion-icon>
                            <div>特权</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <ion-icon color="primary" name="apps"></ion-icon>常用功能
            </div>
            <div class="card-content">
                <div class="row menu border">
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="pin"></ion-icon>
                            <div>离线地图</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="secondary" name="mic"></ion-icon>
                            <div>导航语言包</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="energized" name="star"  ></ion-icon>
                            <div>收藏</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="ribbon"></ion-icon>
                            <div>特权</div>
                        </div>
                    </div>
                </div>
                <div class="row menu border">
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="secondary" name="chatboxes"></ion-icon>
                            <div>消息</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="danger" name="stats"></ion-icon>
                            <div>排行</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="ribbon"></ion-icon>
                            <div>特权</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="ribbon"></ion-icon>
                            <div>特权</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <ion-icon color="primary" name="apps"></ion-icon>常用功能
            </div>
            <div class="card-content">
                <div class="row menu border">
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="pin"></ion-icon>
                            <div>离线地图</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="secondary" name="mic"></ion-icon>
                            <div>导航语言包</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="energized" name="star"  ></ion-icon>
                            <div>收藏</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="ribbon"></ion-icon>
                            <div>特权</div>
                        </div>
                    </div>
                </div>
                <div class="row menu border">
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="secondary" name="chatboxes"></ion-icon>
                            <div>消息</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="danger" name="stats"></ion-icon>
                            <div>排行</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="ribbon"></ion-icon>
                            <div>特权</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="ribbon"></ion-icon>
                            <div>特权</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <ion-icon color="primary" name="apps"></ion-icon>常用功能
            </div>
            <div class="card-content">
                <div class="row menu border">
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="pin"></ion-icon>
                            <div>离线地图</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="secondary" name="mic"></ion-icon>
                            <div>导航语言包</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="energized" name="star"  ></ion-icon>
                            <div>收藏</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="ribbon"></ion-icon>
                            <div>特权</div>
                        </div>
                    </div>
                </div>
                <div class="row menu border">
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="secondary" name="chatboxes"></ion-icon>
                            <div>消息</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="danger" name="stats"></ion-icon>
                            <div>排行</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="ribbon"></ion-icon>
                            <div>特权</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="icon-text">
                            <ion-icon color="primary" name="ribbon"></ion-icon>
                            <div>特权</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</ion-content>
